import React, { useState, useEffect } from 'react';
import { Cell, Image, Flex, Pagination } from 'react-vant';
import TopNav from '../../components/TopNav/TopNav';
import axios from 'axios';
import { Ellipsis, Plus } from '@react-vant/icons';

const items = ["信息", "任务"];

const Staff = () => {
    const [page, setPage] = useState(1); // 当前员工页码
    const [pageSize] = useState(5); // 每页显示的数量
    const [staffList, setStaffList] = useState([]);
    const [showAddButton, setShowAddButton] = useState(false); // 控制是否显示加号按钮

    const fetchData = async () => {
        const staffResponse = await axios.get('http://192.168.0.154:3000/my/posts');
        setStaffList(staffResponse.data);
    };

    useEffect(() => {
        fetchData();
        // 延迟显示加号按钮
        const timer = setTimeout(() => {
            setShowAddButton(true);
        }, 1000); // 设置延迟为2000毫秒（2秒）

        // 清理定时器
        return () => clearTimeout(timer);
    }, []);

    // 计算当前页面的员工列表
    const currentStaffList = staffList.slice((page - 1) * pageSize, page * pageSize);

    return (
        <div style={{ width: '100%',height:'100vh',overflowY:'auto',backgroundColor: 'rgb(244,249,253)', border: '1px solid transparent' }}>
            <TopNav />
            <div style={{ width: '335px', margin: '0 auto' }}>
                
                <h2 style={{ margin: '20px 0px 20px 10px' }}>假期</h2>

                <div className='demo-tabs'>
                    <div style={{ position: 'relative',padding:'0 0 20px 0' }}>
                        {currentStaffList.map((staffMember, index) => (
                            <div key={index} style={{ width: '100%', height: "182px", backgroundColor: 'white', borderRadius: '15px', margin: '20px 0', display: 'block' }}>
                                <Cell
                                    title={staffMember.name}
                                    value={<Ellipsis />}
                                    label={staffMember.email}
                                    size='large'
                                    icon={<Image width={44} height={44} src={staffMember.avatar} round />}
                                    style={{ borderRadius: '15px' }}
                                />
                                <hr style={{ borderWidth: '1px', borderColor: 'rgb(228, 230, 232)', borderStyle: 'solid', width: '90%', margin: '0 auto', marginTop: '20px' }} />
                                <Flex style={{ color: 'rgb(145, 146, 158)', width: '90%', margin: '0 auto', textAlign: 'left', marginTop: '20px' }}>
                                    <Flex.Item span={6}>调休</Flex.Item>
                                    <Flex.Item span={12}>病假</Flex.Item>
                                    <Flex.Item span={6}>居家办公</Flex.Item>
                                </Flex>
                                <Flex style={{ width: '90%', margin: '0 auto', textAlign: 'left', marginTop: '10px' }}>
                                    <Flex.Item span={6}>{staffMember.tiaoxiu}</Flex.Item>
                                    <Flex.Item span={12}>{staffMember.bingjia}</Flex.Item>
                                    <Flex.Item span={6}>{staffMember.bangong}</Flex.Item>
                                </Flex>
                                
                            </div>
                        ))}
                        <div style={{position:'fixed',width:'335px',height:'40px',zIndex:'1000',bottom:'0px',background:'rgb(244, 249, 253)'}}>
                             <Pagination value={page} mode="simple" onChange={setPage} pageCount={Math.ceil(staffList.length / pageSize)} />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Staff;